import React, { useState, useEffect } from 'react'

const ReactNativeAdvanced = ({ onNavigate }) => {
  const [activeCard, setActiveCard] = useState(null)
  const [isAnimating, setIsAnimating] = useState(false)

  const handleCardPress = (action) => {
    if (isAnimating) return
    
    setIsAnimating(true)
    setActiveCard(action)
    
    // 模拟React Native的动画效果
    setTimeout(() => {
      if (onNavigate) {
        onNavigate(action)
      }
      setIsAnimating(false)
      setActiveCard(null)
    }, 300)
  }

  const cardData = [
    {
      id: 'emergency',
      icon: '🚨',
      title: '急诊服务',
      subtitle: '24小时急诊',
      color: '#ff4757',
      description: '紧急医疗救助，快速响应'
    },
    {
      id: 'appointment',
      icon: '📋',
      title: '预约管理',
      subtitle: '智能预约',
      color: '#2ed573',
      description: '在线预约挂号，便捷管理'
    },
    {
      id: 'reports',
      icon: '📊',
      title: '检查报告',
      subtitle: '在线查看',
      color: '#3742fa',
      description: '检查结果查询，报告下载'
    },
    {
      id: 'medication',
      icon: '💊',
      title: '用药提醒',
      subtitle: '定时提醒',
      color: '#ffa502',
      description: '智能用药提醒，健康管理'
    }
  ]

  const styles = {
    container: {
      backgroundColor: '#f8f9fa',
      padding: '20px',
      margin: '16px 0',
      borderRadius: '16px',
      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
    },
    header: {
      textAlign: 'center',
      marginBottom: '24px',
    },
    title: {
      fontSize: '20px',
      fontWeight: 'bold',
      color: '#2c3e50',
      marginBottom: '8px',
    },
    subtitle: {
      fontSize: '14px',
      color: '#7f8c8d',
    },
    grid: {
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))',
      gap: '16px',
      marginBottom: '24px',
    },
    card: {
      backgroundColor: '#fff',
      borderRadius: '12px',
      padding: '20px',
      textAlign: 'center',
      cursor: 'pointer',
      transition: 'all 0.3s ease',
      border: '2px solid transparent',
      position: 'relative',
      overflow: 'hidden',
    },
    cardActive: {
      transform: 'scale(1.05)',
      boxShadow: '0 8px 25px rgba(0, 0, 0, 0.15)',
    },
    cardIcon: {
      fontSize: '32px',
      marginBottom: '12px',
      display: 'block',
    },
    cardTitle: {
      fontSize: '16px',
      fontWeight: '600',
      color: '#2c3e50',
      marginBottom: '4px',
    },
    cardSubtitle: {
      fontSize: '12px',
      color: '#7f8c8d',
      marginBottom: '8px',
    },
    cardDescription: {
      fontSize: '11px',
      color: '#95a5a6',
      lineHeight: '1.4',
    },
    pulse: {
      position: 'absolute',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      width: '100%',
      height: '100%',
      borderRadius: '12px',
      background: 'radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%)',
      animation: 'pulse 0.6s ease-out',
      pointerEvents: 'none',
    },
    statsSection: {
      backgroundColor: '#fff',
      borderRadius: '12px',
      padding: '20px',
      marginTop: '16px',
    },
    statsTitle: {
      fontSize: '16px',
      fontWeight: '600',
      color: '#2c3e50',
      marginBottom: '16px',
      textAlign: 'center',
    },
    statsGrid: {
      display: 'grid',
      gridTemplateColumns: 'repeat(2, 1fr)',
      gap: '16px',
    },
    statItem: {
      textAlign: 'center',
      padding: '12px',
      backgroundColor: '#f8f9fa',
      borderRadius: '8px',
    },
    statValue: {
      fontSize: '24px',
      fontWeight: 'bold',
      color: '#2ed573',
      marginBottom: '4px',
    },
    statLabel: {
      fontSize: '12px',
      color: '#7f8c8d',
    },
    '@keyframes pulse': {
      '0%': {
        transform: 'translate(-50%, -50%) scale(0)',
        opacity: 1,
      },
      '100%': {
        transform: 'translate(-50%, -50%) scale(1.5)',
        opacity: 0,
      },
    },
  }

  return (
    <div style={styles.container}>
      <div style={styles.header}>
        <div style={styles.title}>React Native 高级组件</div>
        <div style={styles.subtitle}>原生体验，流畅交互</div>
      </div>

      <div style={styles.grid}>
        {cardData.map((card) => (
          <div
            key={card.id}
            style={{
              ...styles.card,
              ...(activeCard === card.id ? styles.cardActive : {}),
              borderColor: activeCard === card.id ? card.color : 'transparent',
            }}
            onClick={() => handleCardPress(card.id)}
            onMouseEnter={(e) => {
              if (!isAnimating) {
                e.target.style.transform = 'scale(1.02)'
                e.target.style.boxShadow = '0 4px 15px rgba(0, 0, 0, 0.1)'
              }
            }}
            onMouseLeave={(e) => {
              if (!isAnimating) {
                e.target.style.transform = 'scale(1)'
                e.target.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.1)'
              }
            }}
          >
            {activeCard === card.id && (
              <div style={styles.pulse}></div>
            )}
            <span style={styles.cardIcon}>{card.icon}</span>
            <div style={styles.cardTitle}>{card.title}</div>
            <div style={styles.cardSubtitle}>{card.subtitle}</div>
            <div style={styles.cardDescription}>{card.description}</div>
          </div>
        ))}
      </div>

      <div style={styles.statsSection}>
        <div style={styles.statsTitle}>今日数据概览</div>
        <div style={styles.statsGrid}>
          <div style={styles.statItem}>
            <div style={styles.statValue}>156</div>
            <div style={styles.statLabel}>今日挂号</div>
          </div>
          <div style={styles.statItem}>
            <div style={styles.statValue}>89</div>
            <div style={styles.statLabel}>待缴费</div>
          </div>
          <div style={styles.statItem}>
            <div style={styles.statValue}>23</div>
            <div style={styles.statLabel}>检查报告</div>
          </div>
          <div style={styles.statItem}>
            <div style={styles.statValue}>7</div>
            <div style={styles.statLabel}>用药提醒</div>
          </div>
        </div>
      </div>

      <style>
        {`
          @keyframes pulse {
            0% {
              transform: translate(-50%, -50%) scale(0);
              opacity: 1;
            }
            100% {
              transform: translate(-50%, -50%) scale(1.5);
              opacity: 0;
            }
          }
        `}
      </style>
    </div>
  )
}

export default ReactNativeAdvanced
